<script setup lang="ts">
import {
  ElButton,
  ElDescriptions,
  ElDescriptionsItem,
  ElInput,
} from 'element-plus';

defineOptions({
  name: 'IPv4',
});
const handleSaveIP4v = () => {
  console.log('保存');
};
</script>
<template>
  <div class="ipv4">
    <ElDescriptions
      :column="1"
      border
      class="network-config-descriptions"
      title="基础配置"
    >
      <ElDescriptionsItem
        label="接口类型"
        label-align="right"
        label-class-name="label-style"
      >
        <ElInput disabled placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="IP4v地址" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="子网掩码" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="网关" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="首选DNS" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="备选DNS" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <ElDescriptions
      :column="1"
      border
      class="network-config-descriptions"
      title="其他配置"
    >
      <ElDescriptionsItem label="广播地址" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="IPv6" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="MAC地址" label-align="right">
        <ElInput placeholder="请输入" size="small" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <div class="footer">
      <ElButton size="small" type="primary" @click="handleSaveIP4v">
        保存
      </ElButton>
    </div>
  </div>
</template>
<style lang="scss">
@import url('./index.scss');
</style>
